<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改信息</title>
    <link rel="stylesheet" href="/resources/css/amazeui.min.css" />
    <script src="/resources/js/jquery.min.js"></script>
    <style type="text/css">
        #eye{
            position: relative;
            top:-30px;
            right:10px;
            float: right;
        }
        #eye2{
            position: relative;
            top:-30px;
            right:10px;
            float: right;
        }
    </style>
</head>
<body>
<!-- 顶部 -->
<div style="background-color:#82a6f5;height:7%;">
    <a href="/c/centre" target="_parent">
        <button style="background-color:rgba(255,255,255,0);border-radius:25px;border-color:white;margin-top:7px;margin-left:12px;">
            <b style="color:white;"><</b>
        </button>
    </a>
</div>
<!-- 中间 -->
    <div id="center" style="width:100%;height:93%;" class="am-g">
        <div style="width:150px;height:150px;margin-left:auto;margin-right:auto;">
            <img src="${userInfo.userPhoto}" alt="头像" onerror="this.src='/resources/img/user_img.jpg'"  class="userphoto am-img-thumbnail am-circle" style="width:100%;height:100%;">
        </div>
        <div style="text-align:center;margin:10px 0;">
            <span class="am-icon-pencil" id="username">${userInfo.userName}</span>
        </div>
        <div class="am-form-group am-form-file" style="text-align:center;">
            <div class="am-u-sm-12 am-u-md-5">
                <button type="button" class="am-btn am-btn-danger am-btn-sm">
                    <i class="am-icon-cloud-upload"></i> 请选择您的头像</button>
                <input type="file" class="photoup" style="background:transparent;" />
            </div>
        </div>
        <div class="tpl-login-content">
            <form class="am-form tpl-form-line-form" style="margin:50px 10px;">
                <div class="am-form-group">
                    <input type="password" class="tpl-form-input" onblur="check_pwd1(${userInfo.password})" id="pwd" placeholder="请输入原密码">
                    <i id="eye" class="am-icon-eye"></i>
                    <a id="checkpwd" style="visibility: inherit"></a>
                </div>
                <div class="am-form-group">
                    <input type="password" class="tpl-form-input" onblur="check_pwd2()" id="pwd2" placeholder="请输入新密码">
                    <i id="eye2" class="am-icon-eye"></i>
                    <a id="checkpwd2" style="visibility: inherit"></a>
                </div>
                <div class="am-form-group">
                    <input type="text" class="tpl-form-input-12" onblur="check_mail('${userInfo.userMail}')" id="user_mail" placeholder="请输入邮箱(非必填)" />
                    <a id="chenckmail" style="visibility: inherit"></a>
                </div>
                <div class="am-form-group">
                    <button type="button" class="am-btn am-btn-secondary am-btn-block" onclick="check_phone()">修改</button>
                </div>
            </form>
        </div>
    </div>
</body>
<script src="/resources/jsutlis/fileupload.js"></script>
<script>
    //--------图片---------------
    var url_userPhoto;
    var check_pwd_type=false;
    var check_mail_type=false;
    var check_pwd_type2=false;
    //图片处理类
    var ma;
    $(".photoup").bind('change',function(){
        var fordate = new FormData();
        var fils = $(".photoup").get(0).files[0];
        fordate.append('pic', fils);
        var result = uploadfile('photoup');
        if (result.code == 0) {
            url_userPhoto=result.data;
            var formData = new FormData();
            var url= "/mo/update";
            formData.append("userPhoto",result.data);//路径
            $.ajax({
                type: "POST",
                cache: false,
                url:url,
                data:formData,
                processData: false,
                contentType: false
            }).done(
                function (res) {
                    if (res.emp){
                        $(".userphoto").attr({'src': result.data});
                        $(".strPhoto").val(result.data);
                        alert("头像修改成功");
                    }else {
                        alert("网络异常")
                    }
                }
            );
        } else {
            alert("图片上传失败！");
        }

    });
    //--------密码显示与隐藏-------------
    $("#eye").on("click",function(){
        if($("#eye").attr("class") == "am-icon-eye"){
            $("#eye").removeClass().addClass("am-icon-eye-slash");
            $("#pwd").attr("type","text");
        }else{
            $("#eye").removeClass().addClass("am-icon-eye");
            $("#pwd").attr("type","password");
        }
    });
    //密码查看与隐藏2
    $("#eye2").on("click",function(){
        if($("#eye2").attr("class") == "am-icon-eye"){
            $("#eye2").removeClass().addClass("am-icon-eye-slash");
            $("#pwd2").attr("type","text");
        }else{
            $("#eye2").removeClass().addClass("am-icon-eye");
            $("#pwd2").attr("type","password");
        }
    });
    //密码原校验
    function check_pwd1(pwd) {
        //  $("#pwd2").val()=="",checkpwd2
            if($("#pwd").val()==""){
                var checkpwd=document.getElementById("checkpwd");
                checkpwd.innerHTML="原密码不能为空";
                checkpwd.style.color="red";
                checkpwd.style.visibility="visible";
                check_pwd_type=false;
            }else if (pwd==$("#pwd").val()) {
                check_pwd_type=true;
                var checkpwd=document.getElementById("checkpwd");
                checkpwd.setAttribute("style","display:none");
            }else {
                var checkpwd=document.getElementById("checkpwd");
                checkpwd.innerHTML="原密码错误";
                checkpwd.style.color="red";
                checkpwd.style.visibility="visible";
                check_pwd_type=false;
            }
    }
    function check_pwd2() {
        if ($("#pwd2").val()==""){
            var checkpwd2=document.getElementById("checkpwd2");
            checkpwd2.innerHTML="新密码不能为空";
            checkpwd2.style.color="red";
            checkpwd2.style.visibility="visible";
            check_pwd_type2=false;
        } else if ($("#pwd2").val().length>=6) {
            check_pwd_type2=true;
            var checkpwd2=document.getElementById("checkpwd2");
            checkpwd2.setAttribute("style","display:none");
        }else {
            var checkpwd2=document.getElementById("checkpwd2");
            checkpwd2.innerHTML="密码长度不能小于6";
            checkpwd2.style.color="red";
            checkpwd2.style.visibility="visible";
            check_pwd_type2=false;
        }
    }
    // //------------------------检查邮箱是否已经注册过---------------
    function check_mail(mail) {
        ma=mail;
        var user_mail = $("#user_mail").val();
        if (user_mail!=""){
            if( !( /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(user_mail) ) ){
                var chenckmail=document.getElementById("chenckmail");
                chenckmail.innerHTML="您填写的邮箱有误，请检查重填！";
                chenckmail.style.color="red";
                chenckmail.style.visibility="visible";
                return false;
            }
            if (mail==user_mail){
                var chenckmail=document.getElementById("chenckmail");
                chenckmail.innerHTML="与原邮箱号码相同！";
                chenckmail.style.color="blu";
                chenckmail.style.visibility="visible";
                check_mail_type=true;
            } else {
                var formData = new FormData();
                var url= "/r/isexist";
                formData.append("userMail",user_mail);
                $.ajax({
                    type: "POST",
                    cache: false,
                    url:url,
                    data:formData,
                    processData: false,
                    contentType: false
                }).done(
                    function (res) {
                        if (res.emp==false){
                            check_mail_type=false;
                            var chenckmail=document.getElementById("chenckmail");
                            chenckmail.innerHTML="邮箱已经注册";
                            chenckmail.style.color="red";
                            chenckmail.style.visibility="visible";
                        }else {
                            var chenckmail=document.getElementById("chenckmail");
                            chenckmail.setAttribute("style","display:none");
                            check_mail_type=true;
                        }
                    }
                ).error(function () {
                    alert("启用失败");
                });
            }
        }else {
            check_mail_type=true;
        }
        return check_mail_type;
    }
    function check_phone() {
        var c=check_mail(ma);
        if ($("#username").html()==""){
            var chenckmail=document.getElementById("chenckmail");
            chenckmail.innerHTML="用户名不能为空！";
            chenckmail.style.color="red";
            chenckmail.style.visibility="visible";
            return false;
        }
        if ($("#pwd2").val()==""){
            var checkpwd2=document.getElementById("checkpwd2");
            checkpwd2.innerHTML="新密码不能为空";
            checkpwd2.style.color="red";
            checkpwd2.style.visibility="visible";
            return false;
        }
        if(!check_pwd_type){
            var checkpwd=document.getElementById("checkpwd");
            checkpwd.innerHTML="原始密码错误";
            checkpwd.style.color="red";
            checkpwd.style.visibility="visible";
            check_pwd_type=false;
            return false
        }
        if (!check_pwd_type2){
            var checkpwd2=document.getElementById("checkpwd2");
            checkpwd2.innerHTML="密码长度不能小于6";
            checkpwd2.style.color="red";
            checkpwd2.style.visibility="visible";
            check_pwd_type2=false;
            return false
        }
        if (!check_mail_type&&!c) {
            var chenckmail=document.getElementById("chenckmail");
            chenckmail.innerHTML="请查看邮箱信息！";
            chenckmail.style.color="red";
            chenckmail.style.visibility="visible";
            check_mail_type=false;
        }else {
            var formData = new FormData();
            var url= "/mo/update";
            formData.append("userName",$("#username").html());
            formData.append("userPhoto",url_userPhoto);//路径
            formData.append("password",$("#pwd2").val());
            formData.append("userMail",$("#user_mail").val());
            $.ajax({
                type: "POST",
                cache: false,
                url:url,
                data:formData,
                processData: false,
                contentType: false
            }).done(
                function (res) {
                    if (res.emp=="true"){
                       alert("修改成功");
                        window.location.href="/c/centre"
                    }else {
                        alert("修改异常")
                    }
                }
            );
        }
    }
    //用户名
    $(document).ready(function(e) {
        $("#username").on("click", function () {
            $(this).attr("contenteditable","true");
        });
        $("#username").on("blur", function () {
            $(this).attr("contenteditable","false");
        });
    });
</script>
</html>